<template>
	<view>
		<van-tabs v-model="active" sticky @click-tab='changeTab'>
			<van-tab title="上下班打卡"></van-tab>
			<van-tab title="假勤 "></van-tab>
			<van-tab title="加班"></van-tab>
			<!-- <van-tab title="外出"></van-tab> -->
		</van-tabs>
		 
		<view >
			<view class="card" v-if="list.length>0">
				<view class="listItem" v-for="(item,index) in list " :key="index">
					<view >{{item.date}}——</view>
					<view class="zc" v-if='item.status=="NORMAL"'>{{item.tip}}</view>
					<view class="yc" v-else>{{item.tip}}</view>
				</view>
			</view>
			
			
			<view v-else>
				<van-empty image-size="150" description="暂无记录" />
			</view>
		</view> 
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script setup>
 const active=ref(0) 
import {
	openWeekMonthDetail,//打卡
	openApproveDetailWeekMonthDetail,  //假勤
	overworkDetailWeekMonthDetail, //加班
} from "@/api"  
import {
	onLoad,
	onUnload
} from '@dcloudio/uni-app';
import * as timeDeal from "@/utils/time.js"
const list =ref([])
const weekfl=ref({})
const montnfl=ref({})
const type=ref('')
onLoad((options)=>{ 
	const currentDate = new Date();
	montnfl.value.firstDay=timeDeal.formateDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),"Y-M-D")
	montnfl.value.lastDay=timeDeal.formateDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0),"Y-M-D")
	
	let week=getWeekStartAndEnd()
	weekfl.value.lastDay=week.lastDay
	weekfl.value.firstDay=week.firstDay 
	
	type.value=options.type
	if(options.type=='week'){
		getweek()
	}else{
		getMonth()
	}
})	
// 月统计
const getMonth=()=>{ 
	
	
	if(active.value==0){
		openWeekMonthDetail(
		{
			endDay:montnfl.value.lastDay,
			startDay:montnfl.value.firstDay
		}).then(res=>{
			list.value=res.data
		})
	}else if(active.value==1){
		openApproveDetailWeekMonthDetail(
		{
			endDay:montnfl.value.lastDay,
			startDay:montnfl.value.firstDay
		}).then(res=>{
			list.value=res.data
		})
	}else if(active.value==2){
		overworkDetailWeekMonthDetail(
		{
			endDay:montnfl.value.lastDay,
			startDay:montnfl.value.firstDay
		}).then(res=>{
			list.value=res.data
		})
	}else if(active.value==3){
		
	}
}
// 周统计
const getweek=()=>{ 
	if(active.value==0){
		openWeekMonthDetail(
		{
			endDay:weekfl.value.lastDay,
			startDay:weekfl.value.firstDay
		}).then(res=>{
			list.value=res.data
		})
	}else if(active.value==1){
		openApproveDetailWeekMonthDetail(
		{
			endDay:weekfl.value.lastDay,
			startDay:weekfl.value.firstDay
		}).then(res=>{
			list.value=res.data
		})
	}else if(active.value==2){
		overworkDetailWeekMonthDetail(
		{
			endDay:weekfl.value.lastDay,
			startDay:weekfl.value.firstDay
		}).then(res=>{
			list.value=res.data
		})
	}else if(active.value==3){
		
	}
	
}
const changeTab=(e)=>{
	active.value=e.name
	list.value=[]
	if(type.value==0){
		getweek()
	}else{
		getMonth()
	}
}
function getWeekStartAndEnd() {
  const date = new Date();
  const today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
  const firstDay = new Date(today);
  const lastDay = new Date(today);
  
  const diff = 1 - today.getDay();
  firstDay.setDate(today.getDate() + diff); // 获取本周第一天的日期
  lastDay.setDate(today.getDate() + (6 - today.getDay() + 1)); // 获取本周最后一天的日期 
  const formattedFirstDay = `${firstDay.getFullYear()}-${(firstDay.getMonth() + 1).toString().padStart(2, '0')}-${firstDay.getDate().toString().padStart(2, '0')}`;
  const formattedLastDay = `${lastDay.getFullYear()}-${(lastDay.getMonth() + 1).toString().padStart(2, '0')}-${lastDay.getDate().toString().padStart(2, '0')}`;
 
  return { firstDay: formattedFirstDay, lastDay: formattedLastDay };
}
</script>

<style lang="scss" scoped>
.card{
	width: 690rpx;
	margin: 30rpx auto;
	padding:0 20rpx;
	box-sizing:border-box;
	background: #fff;
	border-radius: 20rpx;
	.listItem{
		display: flex;
		padding: 30rpx 0;
		font-size: 28rpx;
		border-bottom: 1px solid #e1e1ee;
		&:nth-last-child(1){
			border: none;
		}
		.zc{
			color: #11bf71;
		}
		.yc{
			color: #ff0000;
		}
	}
}
</style>
